<template>
  <div class="outlierAnalysis-container dialogHeaderFont">
    <!--  异常分析  -->
    <div class="analysis-dialog">
      <el-dialog title="产品对比分析" width="100%" top="8vh"
           :visible.sync="visible" @close="$emit('update:showdialog', false)">
        <div class="analysis-dialog-content">
          <div class="titleHeader analysisHeader">
            <div class="setHeader">
              <el-radio-group size="small" v-model="searchParam.mineMonSet" @change="onRadioChange">
                <el-radio-button v-for="(item, index) in durationRange.selectMonth"
                                 :label="item.val" :key="index">{{item.name}}</el-radio-button>
              </el-radio-group>
              <div class="el-select-container">
                <div class="el-select-label">选择日期</div>
                <el-select size="small" v-model="searchParam.mineYearSet"
                           placeholder="选择年份" style="width: 156px" @change="onSaleRangeChange">
                  <el-option v-for="(item, index) in durationRange.selectYear"
                    :key="index" :label="item.name" :value="item.val">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="contrastive">
            <div class="contrastive-container">
              <div class="contrastive-item contrastive-title">
                <div class="compare-option optionProd" id="headerSet">
                </div>
                <div class="compare-option borderSet">
                  销售数据对比
                </div>
                <div class="compare-option">
                  市场占有率
                </div>
                <div class="compare-option">
                  销售量/周期增长率
                </div>
                <div class="compare-option">
                  销售额/周期增长率
                </div>
                <div class="compare-option">
                  销售均价
                </div>
                <div class="compare-option">
                  线上销售平台数
                </div>
                <div class="compare-option borderSet">
                  产品属性对比
                </div>
                <div class="compare-option"  v-for="(itm,indx) in productSetProperties" :key="indx">{{itm.productProperties}}</div>
                <div class="compare-option borderSet">
                  用户评论/口碑对比
                </div>
                <div class="compare-option">
                  评论数
                </div>
                <div class="compare-option">
                  正面评论数
                </div>
                <div class="compare-option">
                  负面评论数
                </div>
                <div class="compare-option">
                  正面焦点
                </div>
                <div class="compare-option">
                  负面焦点
                </div>
                <div class="compare-option borderSet">
                  产品卖点对比
                </div>
                <div class="compare-option">
                  卖点数
                </div>
                <div class="compare-option">
                  卖点内容
                </div>
              </div>
              <div class="contrastive-item contrastive-body">
                <div class="prod-item" v-for="(item,index) in compareItemsProd" :key="index">
                  <div class="compare-prod compare-prod-title">
                    <div class="imgSet">
                      <img :src="item.productImage.productMainImage" alt="暂无图片" style="width: 100px; height: 100px;">
                    </div>
                    <div class="flex-container flex-containerSet">
                      <div>品牌:</div><div>{{item.productImage.brand}}</div>
                    </div>
                    <div class="flex-container flex-containerSet">
                      <div>型号:</div><div>{{item.productCode}}</div>
                    </div>
                    <i class="el-icon-delete delSet" v-show="index > 0" @click="delSetRow(index)"></i>
                  </div>
                  <div class="compare-prod borderSet"></div>
                  <div class="compare-prod-container">
                    <div class="compare-prod">
                      <div v-if="item.salesData">
                        <span>{{item.salesData.marketShare}}%</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">
                      <div v-if="item.salesData">
                        <span>{{ item.salesData.saleCount }}</span>
                        <span>/</span>
                        <span :style="{'color':item.salesData.countCycleRate >= 0 ? '#ff2354' : '#05c459'}">{{ item.salesData.countCycleRate }}%</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                        <span>/</span>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">
                      <div v-if="item.salesData">
                        <span>￥{{ item.salesData.saleAmount}}</span>
                        <span>/</span>
                        <span :style="{'color':item.salesData.countCycleRate >= 0 ? '#ff2354' : '#05c459'}">{{item.salesData.amountCycleRate }}%</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                        <span>/</span>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">
                      <div v-if="item.salesData">
                        <span>￥{{item.salesData.averagePrice || '暂无数据' }}</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">{{item.salesData ? item.salesData.onlineSalesPlatforms : '暂无数据'}}</div>
                  </div>
                  <div class="compare-prod borderSet"></div>
                  <div class="compare-prod-container">
                    <div class="compare-prod"  v-for="(itm,indx) in item.productProperties" :key="indx">
                      {{itm.productPropertiesValue || '暂无数据'}}
                    </div>
                  </div>
                  <div class="compare-prod borderSet"></div>
                  <div class="compare-prod-container">
                    <div class="compare-prod">
                      <div v-if="item.userData">
                        <span>{{item.userData.commentsNum || 0 }}条</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">
                      <div v-if="item.userData">
                        <span>{{item.userData.positiveComments || 0 }}条</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">
                      <div v-if="item.userData">
                        <span>{{item.userData.negativeComments || 0 }}条</span>
                      </div>
                      <div v-else>
                        <span>暂无数据</span>
                      </div>
                    </div>
                    <div class="compare-prod">{{item.userData ? item.userData.positiveFocus : '暂无数据'}}</div>
                    <div class="compare-prod">{{item.userData ? item.userData.negativeFocus : '暂无数据'}}</div>
                  </div>
                  <div class="compare-prod borderSet"></div>
                  <div class="compare-prod-container">
                    <div class="compare-prod">{{item.pointData ? item.pointData.pointsNum : '暂无数据'}}</div>
                    <div class="compare-prod">{{item.pointData ? item.pointData.pioints : '暂无数据'}}</div>
                  </div>
                </div>
              </div>
              <div class="contrastive-item contrastive-set">
                <div class="plus-item" @click="createDataSetByType(0)">
                  <i class="el-icon-plus"></i>
                  <span>快速添加对比</span>
                </div>
                <div class="plus-item" @click="createDataSetByType(1)">
                  <i class="el-icon-plus"></i>
                  <span>批量添加对比</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!--  快速添加  -->
    <div class="quickSet-container">
      <el-dialog title="快速添加对比" :visible.sync="quickSetDialogVisible" width="50%">
        <div class="quickSet-container-content whiteContainer">
          <div class="select-container" style="padding: 24px 12px 12px 12px;">
            <el-form :inline="true" class="demo-form-inline flex-container space-around" size="small">
              <el-form-item label="品牌">
                <el-select v-model="brandNameSet" placeholder="选择品牌"
                       @change="checked => cateByBrandChangeSet(checked,searchGroupSet)">
                  <el-option v-for="(item,index) in searchBrandSet" :key="item.value"
                     :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品型号">
                <el-select v-model="prodCodeSet" placeholder="选择产品型号">
                  <el-option v-for="(prod,index) in searchCodeSet" :key="prod.value"
                             :label="prod.label" :value="prod.value"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="mine-set-container">
            <div class="btn-container">
              <el-button style="width: 102px;" size="medium" @click="quickSureThis(brandNameSet,prodCodeSet)">确 定</el-button>
              <el-button style="width: 102px;" size="medium" @click="setCancelByType(0)">取 消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!--  批量添加  -->
    <div class="batchSet-container">
      <el-dialog title="批量添加对比" :visible.sync="batchSetDialogVisible" width="50%">
        <div class="batchSet-container-content whiteContainer" >
          <div class="el-collapse-set" style="padding: 0 12px;">
            <el-collapse style="min-height: 96px;" v-loading="screenLoading" v-model="activeNameSet" accordion>
              <el-collapse-item v-for="(item,index) in searchGroupSet" :key="index" :title="item.brandName" :ame="index">
                <div style="display: flex;">
                  <el-checkbox :indeterminate="item.indeterminate" v-model="item.checkAll"
                       @change="checked => handleCheckAllChange(checked,item)" style="margin-right: 30px;">全选</el-checkbox>
                  <el-checkbox-group v-model="item.checkedProds" @change="checked => handleCheckedProdsChange(checked,item)">
                    <el-checkbox style="margin-right: 20px;" v-for="(prod,idx) in item.productCodeList"
                       :label="prod.productCode" :key="idx">{{prod.productCode}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="mine-set-container">
            <div class="btn-container">
              <el-button style="width: 102px;" size="small" @click="batchSureThis">确 定</el-button>
              <el-button style="width: 102px;" size="small" @click="setCancelByType(1)">取 消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import { updateDuration, renderSet } from 'utils/mUtils'

  export default {
      name: "outlier-analysis",
      props: {
        showdialog: {
          type: Boolean,
          default: false,
          required: true
        },
        categoryId: {
          type: String | Number,
          default: '',
          required: true
        },
        productCode: {
          type: String | Number,
          default: '',
          required: true
        }
      },
      computed: {
        ...mapGetters(["compareItemsProd"])
      },
      data() {
          return {
            productSetProperties: {},
            searchParam:{ mineMonSet: 6, mineYearSet: '' },
            brandNameSet: '全部',
            prodCodeSet: '全部',
            activeNameSet: ['1'],
            searchParamSet:{ timeNumber: 6, productCodeList: [] },
            durationRange: { selectMonth: [], selectYear: [] },
            codeCateSet: {},
            searchGroupSet: [],
            searchGroupSetTemp: [],
            searchBrandSet: [],
            searchCodeSet: [],
            seaCodeSetTemp: [],
            screenLoading: true,
            visible: this.showdialog,
            quickSetDialogVisible: false,
            batchSetDialogVisible: false
          }
      },
      mounted() {
        this.getAnalysisParams()
      },
      methods: {
        ...mapMutations(["updateCompareItemsProd","spliceCompareItemsProd"]),
        getAnalysisParams(){
          const { selectMonth, selectYear } = updateDuration()
          this.durationRange = { selectMonth, selectYear }
        },
        onRadioChange(val){
          Object.assign(this.searchParam, { mineYearSet: ''})
        },
        onSaleRangeChange(val){
          Object.assign(this.searchParam, { mineMonSet: ''})
        },
        createDataSetByType(flag){
          Boolean(flag)
            ? this.batchSetDialogVisible = true
            : this.quickSetDialogVisible = true
        },
        delSetRow(index){
          this.spliceCompareItemsProd(index)
        },
        handleCheckAllChange(val,item) {
          item.checkedProds = val ? item.productCodeList.map(v => v.productCode) : []
          item.indeterminate = false
        },
        handleCheckedProdsChange(value,item){
          let checkedCount = value.length
          item.checkAll = checkedCount === item.productCodeList.length
          item.indeterminate = checkedCount > 0 && checkedCount < item.productCodeList.length
        },
        batchSureThis(searchGroupSet){
          let paramsSet = [].concat(...this.searchGroupSet.map(v => v.checkedProds))
          if(paramsSet.length > 0){
            this.obtainDataSolve(paramsSet,true)
          }else {
            this.batchSetDialogVisible = false
          }
        },
        setCancelByType(flag){
          Boolean(flag)
            ? this.batchSetDialogVisible = false
            : this.quickSetDialogVisible = false
        },
        obtainDataSolve(productCodeSet, dialogVisible){
          this.searchParamSet.productCodeList = productCodeSet
          opreate.getStartAnalysis(this.searchParamSet).then(res => {
            this.updateCompareItemsProd({ payload: res.data })
            dialogVisible ? this.batchSetDialogVisible = false : this.quickSetDialogVisible = false
          })
        },
        quickSureThis(brandNameSet,prodCodeSet){
          if('全部' == prodCodeSet){
            let tempSet = '全部' == brandNameSet
              ? this.seaCodeSetTemp.slice(1).map(v => v.label)
              : this.searchGroupSet.find(v => v.brandId == brandNameSet).productCodeList.map(v => v.productCode)
            this.obtainDataSolve(tempSet)
          }else {
            this.obtainDataSolve([prodCodeSet])
          }
        },
        cateByBrandChangeSet(brandId,groupSet){
          if('全部' == brandId){
            this.searchCodeSet = this.seaCodeSetTemp
          }else {
            let { productCodeList } = groupSet.find(v => v.brandId == brandId) || {}
            let searCodeSet = productCodeList ? productCodeList.map(v =>{
              return { label: v.productCode, value: v.productCode }
            }) : []
            this.searchCodeSet = searCodeSet.length > 0
              ? [{ label: "全部", value: "全部" }, ...searCodeSet] : []
          }
          this.prodCodeSet = "全部"
        },
        reStartInitState(){
          this.productSetProperties = this.compareItemsProd[0] ? this.compareItemsProd[0].productProperties : {}
        },
        obtainCompSetByCate(categoryId = ''){
          opreate.getAnalysisCode({ categoryId }).then(res => {
            if(200 == res.code && res.data){
              this.reStartMineParam(res.data || [])
              this.screenLoading = false
            }else {
              this.$message.error('错了哦，获取品类信息错误')
              this.screenLoading = false
            }
          }).catch(err => {
            this.$message.error('错了哦，获取品类信息错误')
            this.screenLoading = false
          })
        },
        reStartMineParam(tempSet = []){
          this.searchGroupSet =  tempSet
          this.searchGroupSetTemp = JSON.parse(JSON.stringify(tempSet))
          let searchBrandSet = tempSet.map(v => {
            return { label: v.brandName, value: v.brandId }
          })
          this.searchBrandSet = searchBrandSet.length > 0
            ? [{ label: "全部", value: "全部" }, ...searchBrandSet] : []
          let searchCodeSet = [].concat.apply([],tempSet.map(v => v.productCodeList)).map(v =>{
            return { label: v.productCode, value: v.productCode }
          })
          this.seaCodeSetTemp = this.searchCodeSet = searchCodeSet.length > 0
            ? [{ label: "全部", value: "全部" }, ...searchCodeSet] : []
          this.activeNameSet = ['1']
          this.brandNameSet = this.prodCodeSet = '全部'
        }
      },
      watch: {
        showdialog:{
          handler(newVal){
            this.visible = newVal
            if(newVal){
              this.obtainCompSetByCate(this.categoryId)
              this.$nextTick(() => {
                this.reStartInitState()
                document.getElementById('headerSet') && new renderSet("headerSet")
              })
            }else {
              this.screenLoading = true
              this.activeNameSet =  ['1']
            }
          },
          immediate:true
        },
        searchParam: {
          handler(newVal){
            let { mineMonSet, mineYearSet } = newVal
            let tempSet = mineMonSet != '' ? { timeNumber: mineMonSet } : { timeNumber: mineYearSet }
            Object.assign(this.searchParamSet,tempSet,{ productCodeList: [] })
            this.reStartMineParam(this.searchGroupSetTemp)
            opreate.getStartAnalysis(Object.assign(tempSet,{ productCodeList:[ this.productCode ] })).then(res => {
              if(200 == res.code && res.data){
                this.updateCompareItemsProd({ payload: res.data, flag: true })
              }else {
                this.$message.error('错了哦，请稍后再试')
              }
            })
          },
          deep: true
        }
      }
  }
</script>

<style scoped>
  /**
  * @desc: This is Note
  * 异常分析Dialog
  * @author: WJ
  * @date: 2018/09/26 21:01:27
  **/
  .analysis-dialog-content{
    background: white;
    border: 1px solid #E0E8EF;
    border-radius: 4px;
  }
  .setHeader,.el-select-container,el-select-label{
    display: flex;
    align-items: center;
  }
  .el-select-label{
    margin: 0 10px 0 15px;
  }
  .analysisHeader{
    justify-content: flex-end;
  }
  .contrastive{
    display: flex;
    padding: 12px;
    overflow-x: auto;
    width: 100%;
  }
  .contrastive-container{
    display: flex;
    border: 1px solid #E0E8EF;
  }
  .contrastive-title{
    min-width: 142px;
    display: flex;
    flex-direction: column;
  }
  .compare-option{
    border: 1px solid #E0E8EF;
  }
  .compare-prod{
    border: 1px solid #E0E8EF;
    white-space:nowrap;
  }
  .contrastive-body{
    display: flex;
  }
  .borderSet{
    font-weight: bold;
  }
  .compare-option,.compare-prod{
    display: flex;
    height: 32px;
    line-height: 32px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px 0 10px;
  }
  .contrastive-set{
    width: 140px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    border: 1px solid #E0E8EF;
  }
  .optionProd{
    height: 165px;
    padding: 0px;
    flex-direction: column;
  }
  .prod-item{
    min-width: 182px;
    display: flex;
    flex-direction: column;
  }
  .compare-prod-title{
    height: 165px;
    padding: 10px 10px 6px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .flex-containerSet{
    width: 100%;
  }
  .imgSet{
    height: 100px;
    width: 100px;
    margin-bottom: 6px;
  }
  .delSet{
    position: absolute;
    right: 8px;
    top: 10px;
    cursor: pointer;
  }
  .plus-item{
    height: 35px;
    display: flex;
    align-items: center;
    color: #409EFF;
    font-size: 15px;
    cursor: pointer;
  }
  .plus-item span{
    padding: 0 5px;
  }
  .plus-item .el-icon-plus{
    font-weight: 800;
    font-size: 15px;
  }
  .contrastive-title .borderSet{
    border-right: none;
  }
  .contrastive-body .borderSet{
    border-right: none;
    border-left: none;
  }
  .prod-item:last-child .borderSet{
    border-right: 1px solid #E0E8EF;
  }

  /**
  * @desc: This is Note
  * 添加对比CSS
  * @author: WJ
  * @date: 2018/09/29 17:41:48
  **/
  .mine-set-container{
    display: flex;
    justify-content: center;
  }
  .btn-container{
    display: flex;
    width: 40%;
    justify-content: space-between;
  }
  .quickSet-container-content .btn-container{
    padding: 12px;
  }
  .batchSet-container-content .btn-container{
    padding: 10px;
  }

  .el-checkbox+ .el-checkbox{
    margin-left: 0 !important;
  }
</style>
